<template>
	<view class="g-page">

        
        <!-- 分类 -->
        <view class="g-cate-wrap" :style="{height: sCateH}">
        	<view class="g-cate-left">
                <text v-for="(item,index) in data" :key="index" :data-index="index" :class="[index==actIndex ? 'z-active' : '']" @tap="tapCate">{{item.name}}</text>
        	</view>
            <view class="g-cate-right">
            	<image class="u-cate-banner" v-if="ads" :src="ads" mode="widthFix"></image>
                <view v-for="(cate, index) in aCateContent" :key="index">
                	<view class="g-subCate-name">
                		<text>{{cate.name}}</text>
                	</view>
                    <navigator open-type="navigate" class="g-cate-item" v-for="(item, itemIndex) in cate._child" :key="itemIndex" :url="'/pages/ydt/search_list?id='+item.id+'&promotion_id='+promotion_id">
                    	<image :src="item.thumb_text" mode="widthFix"></image>
                    	<text>{{item.name}}</text>
                    </navigator>
                </view>
            </view>
        </view>
	</view>
</template>
<script>
    import henglang from '@/common/common.js';
	export default {
		data() {
			return {
                nStatusH: 25,
				sCateH: '100vh',
                aCateContent: [],
                sSearchVal: '',
                data: [],
                actIndex: 0,
                promotion_id: '',
				ads:''
            }
		},
        methods: {
            tapCate(e) {
                let index = e.currentTarget.dataset.index;
                let data = this.data;
                
                this.actIndex = index;
                this.aCateContent = this.data[index]._child;
            }
        },
        onLoad({promotion_id}) {
            let that = this;
            this.promotion_id = promotion_id;
			henglang.get('promotion/getPromotionGoodsCategory',{promotion_id: promotion_id},false,function(res){
				that.data = res.data.data;
				that.aCateContent = that.data[0]._child;
			});
			henglang.get('promotion/getAds',{promotion_id: promotion_id},false,function(res){
				if(res.data.code == '0'){
					that.ads = res.data.data[0].url;
				}
			});
        },
        onReady() {
            let that = this;
            wx.getSystemInfo({
            	success(res) {
                    that.sCateH = (res.windowHeight+50)+'px';
                    that.nStatusH = res.statusbarHeight;
                }
            });
        }
	}
</script>
<style>
    /* 公共样式 */
    image {display: block;}
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    .g-page {
        font-size: 28upx;
        overflow: hidden;
    }
    
    /* 页眉 */
    .g-header {
        height: 88upx;
        background: #fff;
        display: flex;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }
    .u-header-input {
        border-radius: 100rpx;
        background: #f8f8f8;
        flex: 1;
        height: 70upx;
        margin-left: 20upx;
        padding-left: 84upx;
        
    }
    .u-header-msg {
        width: 50upx;
        margin: 0 20upx;
    }
    .u-header-search {
        width: 44upx;
        position: absolute;
        left: 120upx;
        bottom: 19upx;
        z-index: 9;
    }
    
    /* 分类 */
    .g-cate-wrap {
        display: flex;
        box-sizing: border-box;
        overflow: hidden;
    }
    .g-cate-left {
        width: 200upx;
        background: #f8f8f8;
        color: #828080;
        text-align: center;
        overflow: auto;
    }
	
    .g-cate-left text {
        display: block;
        width: 100%;
        padding: 27upx 0;
    }
    .z-active {
        font-size: 32upx;
        color: #D71611;
        font-weight: bold;
    }
    .g-cate-right {
        flex: 1;
        padding: 10upx;
        box-sizing: border-box;
        overflow-y: auto;
    }
    .u-cate-banner {
        width: 100%;
    }
    .g-subCate-name {
        color: #474747;
        padding: 20upx 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .g-subCate-name text {
        margin: 0 20upx;
    }
    .g-subCate-name::before {
        content: '';
        display: block;
        width: 70upx;
        height: 1px;
        background: #808080;
    }
    .g-subCate-name::after {
    	content: '';
    	display: block;
    	width: 70upx;
    	height: 1px;
    	background: #808080;
    }
    .g-cate-item {
        display: inline-flex;
        width: 33.333%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 24upx;
        color: #000;
        margin-bottom: 10px;
    }
    .g-cate-item image {
        width: 70%;
    }
    
</style>
